<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>报销申请</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!--  <link rel="stylesheet" href="../layui/css/layui.css">-->
<!--  <script src="../layui/layui.js"></script>-->
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
    <style type="text/css">
        @media screen and (max-width: 767px) {
            .layui-row{
                display: flex!important;
                flex-direction: column;
            }
            .layui-field-title {
                margin: 5px 0 !important;
            }
            .layui-field-title legend {
                font-size: 0.8rem !important;
            }
            .layui-form .layui-col-xs1 div{
                font-size: 0.9rem!important;
            }
            .layui-form .layui-col-xs1{
                width: 20% !important;
                min-width: 87px!important;
                text-align: left !important;
                margin: 10px 0 0 5px;
                height: 19px !important;
                line-height: 19px !important;
            }
            .layui-form .layui-col-xs5,.layui-form .layui-col-xs12{
                width: 90% !important;
                max-width: 300px;
                font-size: 0.7rem;
            }
            .layui-form-checkbox{
                height: 20px;
                line-height: 20px;
                padding-right: 15px;
                margin: 1px;
            }
                .layui-form-checkbox span{
                font-size: 0.7rem;
                padding: 0 5px;
                }
                .layui-form-checkbox i{
                    height: 18px;
                    line-height: 18px;
                    width: 15px;
                    font-size: 0.7rem;
                }
            .layui-upload{
                margin-left: 2px!important;
            }
            #ID-upload-demo-btn-2{
                max-width: 180px!important;
                min-width: 167px;
                width: 100%!important;
                padding-left: 0px!important;
                font-size: 0.7rem!important;
            }
            .layui-btn{
                padding: 0!important;
                width: 80px;
                height: 28px;
                line-height: 28px;
                font-size: 0.7rem;
            }

            /*时间选择器*/
            .layui-laydate{
                width: 90%;
                max-width: 272px;
                min-width: 169px;
                font-size: 0.6rem!important;
            }
            .layui-laydate-main{
                width: 100%;
                max-width: 272px;
            }
            .layui-laydate-header i{
                padding: 0 !important;
                font-size: 0.6rem!important;
            }
            .layui-laydate-header{
                padding: 10px 45px 5px;
                line-height: 15px
            }
            .layui-laydate-header .laydate-set-ym span{
                padding: 1px!important;
            }
            .layui-laydate-header i.laydate-prev-y {
                left: 5px;
            }
            .layui-laydate-header i.laydate-prev-m {
                left: 25px;
            }
            .layui-laydate-header i.laydate-next-y {
                right: 5px;
            }
            .layui-laydate-header i.laydate-next-m {
                right: 25px;
            }
            .layui-laydate-footer{
                height: 30px!important;
                line-height: 15px!important;
                padding: 3px!important;
            }
            .layui-laydate-footer span{
                line-height: 20px;
                height: 20px;
                padding: 0 3px!important;
                font-size: 0.7rem!important;
            }
            .layui-laydate-footer .laydate-footer-btns{
                top: 3px!important;
            }

        }
    </style>
    <script>
        function deleteprocess() {
            // 创建表单数据对象
            var formData = new FormData();
            formData.append("id", layui.$("#formid").val());
            // 使用sendBeacon方法发送异步请求
            navigator.sendBeacon("/process/delete", formData);
        }
        layui.use(function(){
            var  $=layui.$;
            var form = layui.form;
            var upload = layui.upload;
            $(document).on('click', '#ID-upload-demo-btn-2', function(data) {
                $('#upload-demo-preview').empty()
            });
            var imgupload = upload.render({
                elem: '#ID-upload-demo-btn-2',
                url: 'https://httpbin.org/post',//这个没用随便写一下
                auto: false,
                bindAction: '#ID-upload-demo-files-action',
                multiple: true,
                number: 5,
                exts: 'jpg|png|jpeg',
                choose: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {

                        $('#upload-demo-preview').append('<img class="baseimg"  src="' + result + '" alt="' + file
                            .name + '" style="width: 90px; height: 90px;">')
                    });
                },
                done: function (res) {
                }
            });
            $.ajax({
                    url: '/department/querydepartment1',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            $('#department').append(new Option(item.departmentName, item.departmentId));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }, error: function () {
                        alert("仓库列表加载失败")
                    }
                }
            )
            window.addEventListener("beforeunload",deleteprocess);
            var laydate = layui.laydate;
            // 渲染
            laydate.render({
                elem: '#finalDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            //自定义验证规则
            form.verify({
                maxSize:function(value){
                    if(value.length>200){
                        return '字数最大为200';
                    }
                },
                fileExt: function(value, item){ // value为文件路径，item为当前输入框的DOM对象
                    var allowedExtensions = ['jpg', 'png','jpeg']; // 允许的文件后缀
                    if(value){
                        var extension = value.split('.').pop().toLowerCase(); // 获取文件后缀并转为小写
                        if(allowedExtensions.indexOf(extension) === -1){
                            return '不支持该文件类型，请选择 ' + allowedExtensions.join(', ') + ' 格式的文件';
                        }
                    }
                },
                isAllDigits:function(value){
                    if(!/^\d+(\.\d+)?$/.test(value)){
                        return '请输入数字';
                    }
                },

            });
            form.on('submit(submitForm)', function(data){
                var formData = new FormData(document.getElementById('reimburseForm'));
                var paymentMethods = $("input[name='paymentMethod']:checked")
                    .map(function() {
                        return this.value;
                    })
                    .get()
                    .join(",");
                var imgfiles=$(".layui-upload-file")[0].files
                if (imgfiles.length<1){
                    layer.msg("请输入图片文件");
                    return false;
                }
                formData.append("paymentMethods", paymentMethods)

                for (var i = 0; i < imgfiles.length; i++) {
                    formData.append("imgfiles", imgfiles[i])
                }
                var sindex=layer.load(2, {shade: [0.5,'#000']});
                $.ajax({
                    url: '/process/reimburseadd',
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                    success: function(response) {
                        layer.close(sindex)
                        window.removeEventListener("beforeunload",deleteprocess);
                        location.href="/processadd"
                    },
                    error: function(xhr, status, error) {
                        layer.close(sindex)
                    }
                });
                return  false;
            });
        });
    </script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>报销申请</legend>
</fieldset>
<div>
<form class="layui-form" id="reimburseForm">
    <div style="display: none"><input type="text"name="id"id="formid" th:value="${id}"></div>
    <div class="layui-row">
      <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>经办人</div>
      </div>
      <div class="layui-col-xs5 headfont">
          <input th:value="${userDetails.realName}" name="resignName" type="text" class="layui-input" readonly="readonly" >
      </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
        <div>收款单位(人)</div>
      </div>
      <div class="layui-col-xs5">
          <input class="layui-input" name="payee" lay-verify="required"   autocomplete="off"  lay-affix="clear">
      </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>项目</div>
        </div>
        <div class="layui-col-xs5">
            <input class="layui-input" name="project" lay-verify="required"  autocomplete="off"  lay-affix="clear">
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>开户银行</div>
        </div>
        <div class="layui-col-xs5">
            <input class="layui-input" name="depositBank" lay-verify="required"  autocomplete="off"  lay-affix="clear">
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>账号</div>
        </div>
        <div class="layui-col-xs5">
            <input class="layui-input" name="business" lay-verify="required"  autocomplete="off"  lay-affix="clear">
        </div>
        <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>摘要</div>
        </div>
        <div class="layui-col-xs5">
            <textarea name="abstractStr"id="abstractStr"  class="layui-textarea" lay-verify="required"></textarea>
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>付款方式</div>
        </div>
        <div class="layui-col-xs5">
            <input type="checkbox" name="paymentMethod" lay-verify="required" value="现金"title="现金" lay-skin="tag" >
            <input type="checkbox" name="paymentMethod" lay-verify="required" value="转账"title="转账" lay-skin="tag" >
            <input type="checkbox" name="paymentMethod" lay-verify="required" value="承兑"title="承兑" lay-skin="tag" >
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>金额</div>
        </div>
        <div class="layui-col-xs5">
            <input class="layui-input" name="money" lay-verify="required||isAllDigits"   autocomplete="off"  lay-affix="clear">
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
      <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
          <div >审核人</div>
      </div>
      <div class="layui-col-xs5">
          <select id="auditingPerson" name="auditingPerson" lay-verify="required">
              <option value=""></option>
              <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
          </select>
      </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>附原始单据(张)</div>
        </div>
        <div class="layui-col-xs5">
            <input class="layui-input" name="billCount" lay-verify="required||isAllDigits"  autocomplete="off"  lay-affix="clear">
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs12">
            <div  class="layui-upload" style="margin-left: 10px">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                    预览图：
                    <div class="layui-upload-list" id="upload-demo-preview"></div>
                </blockquote>
                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                    <i class="layui-icon layui-icon-upload"></i>图片文件上传(jpg,png,jpeg)
                </button>
            </div>
        </div>

        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
<!--        <div class="layui-col-xs6"style="height: 200px;">-->
<!--            <div style="display: flex;margin-left: 100px;margin-top: 150px">-->
<!--                <button class="layui-btn" id="submitButton" >保存</button>-->
<!--                &lt;!&ndash;                <button class="layui-btn" id="reset">取消</button>&ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
    </div>
    <div style="display: flex;margin-left: 10px;margin-top: 15px">
        <button class="layui-btn"lay-submit lay-filter="submitForm">立即提交</button>
    </div>
</form>

</div>

</body>
</html>